<template>
    <!-- 鸿签购买 -->
    <div class="relevance">
        <div class="padding15All" style="height:50px;box-sizing:border-box;border-bottom:2px solid #F5F6F7">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>鸿签购买</el-breadcrumb-item>
                <el-breadcrumb-item>按合同份数购买</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <template v-if="type==0">
            <div class="padding15All flexleft" style="flex-wrap:wrap;">
                <div class="contractType padding15top flexcolumn" v-for="(item) in list" :key="item.id">
                    <p>{{item.signNum}}份合同（1年有效期）</p>
                    <div class="flexbetween marignTop15">
                        <p>¥<span>{{item.money}}</span></p>
                        <el-button size="mini" @click="goPay(item)">购买</el-button>
                    </div>
                </div>
            </div>    
        </template>
        <template v-if="type==1">
            <div class="padding15All" style="flex-wrap:wrap;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="按合同份数购买" name="first">
                        <div class=" flexleft" style="flex-wrap:wrap;">
                            <div class="contractType padding15top flexcolumn" v-for="(item) in list" :key="item.id">
                                <p>{{item.signNum}}份合同（1年有效期）</p>
                                <div class="flexbetween marignTop15">
                                    <p>¥<span>{{item.money}}</span></p>
                                    <el-button size="mini" @click="goPay(item)">购买</el-button>
                                </div>
                            </div>
                        </div>            
                    </el-tab-pane>
                    <el-tab-pane label="按增值服务购买" name="second">
                        <div class=" flexleft" style="flex-wrap:wrap;">
                            <div class="contractType padding15top flexcolumn" v-for="(item) in zzlist" :key="item.id">
                                <p>{{item.name}}</p>
                                <div class="flexbetween marignTop15">
                                    <p>¥<span>{{item.money}}</span></p>
                                    <el-button size="mini" @click="goPayInfo(item)">购买</el-button>
                                </div>
                            </div>
                        </div>  
                    </el-tab-pane>
                </el-tabs>
            </div>
        </template>
        
    </div>
</template>

<script>
import { signPurchaseList } from '@/api/pay'
import { signAppreciationList } from '@/api/proof'
export default {
    inject: ['closeloading'],
    data(){
        return{
            list:[],
            zzlist:[],
            type:'',
            activeName: 'first'
        }
    },
    mounted(){
        let _this=this
        _this.type=_this.$route.meta.type
        // if(_this.type==1){
            // _this.getSignPurchaseList('first')
        // }else if(_this.type==0){
            _this.getSignPurchaseList()
        // }
    },
    methods:{
        handleClick(tab, event) {
            let _this=this
            // console.log(tab, event);
            console.log(tab.name);
            if(tab.name=="second"){
                _this.getSignAppreciationList()
            }else if(tab.name=="first"){
                _this.getSignPurchaseList()
            }
        },
        // 获取增值服务列表
        getSignAppreciationList(){
            signAppreciationList().then(res => {
                this.zzlist=res.result
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 获取鸿签列表
        getSignPurchaseList(){
            let _this=this
            signPurchaseList().then(res => {
                // console.log(res.result);
                _this.list=res.result
                _this.closeloading()
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        goPay(item){
            let obj={
                money:item.money,// 价格
                timeliness:365,// 有效期
                name:'鸿签次数（'+item.signNum+'份合同）',//  产品名称
                id:item.id,// 鸿签服务id
                signPayType:this.type,// 类型 0个人1企业
                type:0,// 类型0鸿签1增值
                enterpriseId:this.$route.meta.type==1?localStorage.getItem('companyid'):'',//企业id
            }
            this.$router.push({name:'contractPayInfo',params:obj},()=>{})
        },
        goPayInfo(item){
            let obj={
                money:item.money,// 价格
                timeliness:item.timeliness,// 有效期
                name:item.name,//  产品名称
                id:item.id,// 增值服务id
                signPayType:1,// 类型 0个人1企业
                type:1,// 类型0鸿签1增值
                enterpriseId:localStorage.getItem('companyid'),//企业id
            }
            this.$router.push({name:'payInfo',params:obj},()=>{})
        },
    }
}
</script>

<style lang="scss" scoped>
.relevance{
    .contractType{
        width: 15%;
        border: 2px solid #F5F6F7;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        div,p{
            width: 80%;
        }
        p{
            height: 40px;
        }
        span{
            font-size: 25px;
            font-weight: bold;
        }
    }
}
</style>